import React, { Component } from "react";
import { Feed, Icon } from "semantic-ui-react";
import joe from "@assert/avator/joe.jpg";
import * as websocket from "@utils/vedio";
function AddressItem(props) {
  const item = props.item;
  const summary = {
    display: "flex",
    fontSize: "1.2em",
    justifyContent: "space-between"
  };
  const event = {
    padding: "2px 15px",
    borderBottom: "1px #e8e8e8 inset",
    cursor: "pointer"
  };
  const call = () => {
    console.log("this is:", this);
  };

  return (
    <Feed.Event style={event} onClick={e => call(e)}>
      <Feed.Label style={{ width: "3em", alignSelf: "center" }}>
        <img src={joe} />
      </Feed.Label>
      <Feed.Content style={{ marginTop: ".3em" }}>
        <Feed.Summary style={summary}>
          <a>{item.username}</a>
          <Feed.Date>{item.date}</Feed.Date>
        </Feed.Summary>
        <Feed.Extra text>{item.text}</Feed.Extra>
      </Feed.Content>
    </Feed.Event>
  );
}
class AddressList extends Component {
  render() {
    // 从store tree中获取数据
    //const content = this.props.content;
    const content = JSON.parse(window.localStorage.getItem("users"));
    console.log(content);
    let listItems = null;
    if (content != null) {
      listItems = content.map((item, index) => (
        <AddressItem key={index.toString()} item={item} />
      ));
    } else {
      listItems = null;
    }

    const style = {
      // border: "1px solid rgb(232, 232, 232)"
      overflowX: "hidden",
      overflowY: "auto",
      height: 0,
      margin: 0
    };
    return <Feed style={style}>{listItems}</Feed>;
  }
}
export default AddressList;
